<template>
  <el-card shadow="hover">
    <el-tabs>
      <el-tab-pane label="基本信息">
        <basic ref="basicInfo" :info="basic" />
      </el-tab-pane>
      <el-tab-pane label="文本"></el-tab-pane>
      <el-tab-pane label="图片"></el-tab-pane>
      <el-tab-pane label="音频"></el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <div style="text-align: center; margin-left: -100px; margin-top: 10px">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="close">返回</el-button>
      </div>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
import Basic from '@/views/crawl/config/basic.vue';
import { RouteLocationNormalized } from 'vue-router';
import { CrawlSourceConfigVO } from '@/api/crawl/config/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const basic = ref<Partial<CrawlSourceConfigVO>>({});
const basicInfo = ref<InstanceType<typeof Basic>>();

/** 提交按钮 */
const submitForm = () => {
  // 基本信息
  const basicForm = basicInfo.value?.$refs.basicInfoForm;

  Promise.all([basicForm].map(getFormPromise)).then(async (res) => {
    const validateResult = res.every((item) => !!item);
    if (validateResult) {
      proxy?.$modal.msgError('表单校验通过');
    } else {
      proxy?.$modal.msgError('表单校验未通过，请重新检查提交内容');
    }
  });
};
const getFormPromise = (form: any) => {
  return new Promise((resolve) => {
    form.validate((res: any) => {
      resolve(res);
    });
  });
};
const close = () => {
  const obj: RouteLocationNormalized = {
    path: '/crawl/config',
    fullPath: '',
    hash: '',
    matched: [],
    meta: undefined,
    name: undefined,
    params: undefined,
    redirectedFrom: undefined,
    query: { t: Date.now().toString(), pageNum: route.query.pageNum }
  };
  proxy?.$tab.closeOpenPage(obj);
};
</script>
